<template>
  <div class="page-container">
    <div class="imgLogo">
      <img src="../assets/logo.png" alt="zealous-ui" />
      <h3>Zealous UI 有点意思</h3>
    </div>
    <div class="content">
      <!-- <p>基于Vue3+ts+vite的轻量级UI组件库，更小的体积，更快的响应，更强的拓展性！</p> -->
      <div class="btGroups">
        <z-button
          class="btn1"
          type="primary"
          round
          @click="goComponents"
          >开始使用</z-button
        >
        <z-button
          class="btn2"
          round
          @click="goGitHub"
          >Gitee</z-button
        >
      </div>
      <!-- <ul class="cardGroups">
        <li>
          <p>更小的体积</p>
          <div>组件体积更小，灵活使用，按需使用。</div>
        </li>
        <li>
          <p>更快的响应</p>
          <div>配合vue3的composition API，更快的相应。</div>
        </li>
        <li>
          <p>更强的拓展性</p>
          <div>开发者任性自定义组件，满足一切项目使用场景。</div>
        </li>
        <li>
          <p>更完美的支持</p>
          <div>专为vue3+ts版本开发。</div>
        </li>
        <li>
          <p>更友好的渲染</p>
          <div>极少代码量，极简配置项。</div>
        </li>
      </ul> -->
      <div class="links">
        <p class="titles">链接</p>
        <span @click="goToNpm">NPM</span>
        <span @click="goGitHub">反馈</span>
        <span @click="verSion">更新日志</span>
        <span @click="goGitHub">社区</span>
      </div>
    </div>
  </div>
</template>

<script setup lang=ts>
import { onMounted } from '@vue/runtime-core';
import { useRouter } from "vue-router";
import Message from '../../packages/components/message/index';
const router = useRouter();
const message:any = Message;
const goComponents = () => {
  router.push("/home");
  sessionStorage.setItem("nIndex", '1');
}
const goGitHub = () => {
  window.open("https://gitee.com/unicorn-zbf/zealous-ui");
}
const goToNpm = () => {
  window.open("https://www.npmjs.com/package/zealous-ui");
};
const verSion = () => {
  message({
    type: "warning",
    text: "不要再点啦，迭代ing...",
  })
  // router.push("");
};

onMounted(() => {
  sessionStorage.setItem("mIndex", '0-0');
  sessionStorage.setItem("nIndex", '0');
})
</script>

<style lang="scss" scoped>
.page-container{
  height: auto;
  overflow: hidden;
  text-align: center;
  min-height: calc(100vh - 64px);
  background: rgba(9 92 218 / 2%);
  .imgLogo{
    margin: 0 auto;
    display: block;
    width: 400px;
    // margin-top: 60px;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
    h3{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      font-size: 26px;
      width: 100%;
      transition: all .2s ease-in-out;
    }
  }
  // h3{
  //   text-align: center;
  //   font-size: 26px;
  //   color: #4a5264;
  //   margin: 16px 0 0;
  // }
  .content{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 10px;
    p {
      text-align: center;
      color: #636e86;
      font-size: 0.9vw;
    }
    .btGroups{
          width: 100%;
          height: 130px;
          display: flex;
          justify-content: center;
          align-items: center;
      button{
        width: 120px;
        height: 42px;
        text-align: center;
        font-size: 16px;
        margin: 0 10px;
      }
      // .btn1{
      //   padding: 15px 40px; margin-right: 2vw; font-size: 17px
      // }
      // .btn2{
      //   padding: 15px 40px; margin-left: 2vw; font-size: 17px
      // }
    }
    .cardGroups{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      li{
        width: 170px;
        padding: 6px;
        border-radius: 5px;
        background: #f3f6f9;
        margin: 8px;
        box-sizing: border-box;
        float: left;
        vertical-align: top;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        &:last-child{
          margin-right: 0;
        }
        &:hover{
          background: rgba(9, 195, 190, 0.1);
        }
        p{
          font-size: 18px;
          color: #1f2f3d;
          font-weight: 400;
          padding: 15px;
        }
        div{
          font-size: 14px;
          color: #919cac;
          padding: 0;
          line-height: 20px;
        }
      }
      
    }
    .links {
      width: 100%;
      height: auto;
      overflow: hidden;
      text-align: center;
      // margin-bottom: 30px;
      position: absolute;
      bottom: 10px;
      li {
        list-style: none;
        display: inline-block;
        font-size: 0.8vw;
        font-weight: 550;
        color: #0e80eb;
        cursor: pointer;
        margin: 0 0.5vw;
        div {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 4px;
          img {
            width: 1.2vw;
            border-radius: 50%;
            margin-right: 7px;
          }
          span {
            margin: 0;
          }
          &:hover {
            span {
              text-decoration: underline;
            }
          }
        }
      }
      p {
        font-size: 20px;
        font-weight: 600;
        color: #515a6e;
        margin: 0;
        line-height: 50px;
      }
      span {
        display: inline-block;
        line-height: 30px;
        color: #0b6bc5;
        font-size: 16px;
        margin: 5px 10px 5px 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
